<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('提现中心')}}</header-view>
		<view class="content">
			<!-- 提现方式 -->
			<view class="card">
				<view class="type">
					{{$t('账户余额')}}
				</view>
				<view class="balance">
					{{userInfo.price}}
				</view>
			</view>
			<!-- 添加银行卡 -->
			<view class="list_btn flex_between" @tap="openList">
				<view class="add" v-if="JSON.stringify(activeBank)!='{}'">{{activeBank.name+"/"+activeBank.subname}}
				</view>
				<view class="add" v-else>{{$t('添加银行卡')}}</view>
				<uni-icons type="bottom" size="15" color="#fefefe"></uni-icons>
			</view>
			<!-- 数量&密码 -->
			<view class="list">
				<view class="item flex">
					<view class="name">{{$t('数量：')}}</view>
					<u--input :placeholder="$t('请输入提现数量')" border="none" v-model="amount" type="number" color="#fff"
						placeholderStyle="{color:'grey'}"></u--input>
				</view>
				<view class="item flex">
					<view class="name">{{$t('密码：')}}</view>
					<u--input :placeholder="$t('请输入提现密码')" border="none" v-model="password" type="password" maxlength="6"
						color="#fff" placeholderStyle="{color:'grey'}"></u--input>
				</view>
				<view class="tips">
					{{$t('工作时间：')}}09:30-15:00
				</view>
				<u-button class="submit" :text="$t('提交')" @tap="submit"></u-button>
			</view>
		</view>
		<u-action-sheet :actions="bankList" :closeOnClickOverlay="true" :show="show" @close="close" round="20"
			safeAreaInsetBottom @select="selectCard"></u-action-sheet>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		walletListApi,
		withdrawalApi,
		userInfoApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				bankList: [],
				show: false,
				amount: "",
				password: "",
				activeBank: {},
				userInfo: {}
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				userInfoApi().then(res => {
					this.userInfo = res.data.data
				})
			},
			openList() {
				this.getBankList()
			},
			selectCard(e) {
				console.log(e)
				this.activeBank = e
			},
			close() {
				this.show = false
			},
			submit() {
				if (JSON.stringify(this.activeBank) == "{}") {
					uni.$u.toast(this.$t('请选择银行卡'))
					return
				}
				if (this.amount == "") {
					uni.$u.toast(this.$t('请输入提现金额'))
					return
				}
				if (this.password == "") {
					uni.$u.toast(this.$t('请输入提现密码'))
					return
				}
				withdrawalApi({
					wallet_id: this.activeBank.id,
					price: this.amount,
					security_password: this.password
				}).then(res => {
					console.log(res.data)
					this.amount = ""
					this.password = ""
					uni.$u.toast(res.data.msg)
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/mine/mine"
						})
					}, 500)
				})
				this.show = false
			},
			async getBankList() {
				uni.showLoading({
					title: "加载中"
				})
				await walletListApi().then(res => {
					// console.log(res.data.data)
					this.bankList = res.data.data
					uni.hideLoading()
					if (this.bankList.length != 0) {
						this.bankList.map(item => {
							item.name = item.address
							item.color = '#ffaa65'
							item.fontSize = '20'
							item.subname = item.bank
						})
						this.show = true
					} else {
						uni.navigateTo({
							url: "/pages/bankCard/add"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.content {
			padding: 0 24rpx;

			.card {
				background: url("../../static/img/bgImg.png") no-repeat center / 100%;
				width: 100%;
				height: 308rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #ffaa65;
				padding: 0 20rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: cneter;
				justify-content: center;
				flex-direction: column;
				text-align: center;

				.balance {
					font-size: 50rpx;
					font-weight: 700;
					margin-top: 60rpx
				}
			}

			.list_btn {
				background: #1f2039;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 0 28rpx;
				font-size: 32rpx;
				height: 80rpx;
				font-weight: 400;
				color: #fefefe;
			}

			.list {
				.item {
					height: 100rpx;
					background: #1f2039;
					border-radius: 20rpx;
					margin-top: 16rpx;
					padding: 0 20rpx;

					.name {
						width: 180rpx;
						height: 100rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #fefefe;
						line-height: 100rpx;
					}

					.u-input {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
					}
				}

				.tips {
					font-size: 24rpx;
					font-weight: 500;
					color: #ed2e40;
					padding: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.submit {
					height: 88rpx;
					background: #4c3d89;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
					margin-top: 66rpx;
					border: none;
				}
			}
		}
	}

	/deep/.u-popup__content {
		background: #1f2039 !important;
		padding-bottom: 20rpx;

		.u-action-sheet__item-wrap__item {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			/deep/.u-action-sheet--hover {
				background: #1f2039;
			}

			.u-action-sheet__item-wrap__item__name {
				font-size: 32rpx !important;
			}

			.u-action-sheet__item-wrap__item__subname {
				margin-top: 0;
			}
		}
	}
</style>